<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="featon inc." name="author">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/vendor/skin/ftskin.css" rel="stylesheet">
    <link href="/static/vendor/webuploader/webuploader.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/datetimepicker/jquery.datetimepicker.css" rel="stylesheet">
    <title>添加(更新)企业证书</title>
    <style>

    </style>
</head>

<body style="margin-bottom: 60px;">

<div class="ft-subpage-wrapper container-fluid">
    <form action="#" id="form1" method="post" name="form1">
        <div class="row">
            <div class="col-lg-12" id="form_table">
                <fieldset>
                    <legend id="titleText">-添加(更新)企业证书-</legend>
                    <table cellpadding="0" cellspacing="0" class="form-table form-table-border" id="">
                        <tr>
                            <th><span class="f_red">*</span>证书编号</th>
                            <td colspan="3">
                                <input class="form-control" id="code" name="code" placeholder="" required
                                       type="text" value="">
                                <span class="cError"></span>
                            </td>
                        </tr>
                        <tr>
                            <th>照片</th>
                            <td>
                                <div class="file">
                                    <div id="img_box" style="position: relative;display: inline-block;">
                                        <img alt="" id="image" src="">
                                        <div id="img_btn" style="position: absolute;top:100px;left:20px; display: none">
                                            <label for="file"
                                                   style="width: 60px;text-align: center;background-color: #28219e;color: #d8b0b0;border: 1px double;border-radius: 6px;">更&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;换</label>
                                        </div>
                                    </div>
                                    <label id="uploadFile">
                                        <input id="file" name="file" required style="display: none" type="file">
                                        <div style="text-align: center;height: 200px;width: 130px;border: 1px solid #a78888;border-radius: 3px">
                                            <br>
                                            <i class="glyphicon glyphicon-plus"
                                               style="font-size: 58px;color: #b9b8b6;"></i>
                                            <h3 style="color: #b9b8b6;">点击上传</h3>
                                        </div>
                                    </label>
                                </div>
                            </td>
                            <td>备注</td>
                            <td>
                                <textarea class="form-control" id="remark" name="remark"
                                          placeholder="描述一下吧..."
                                          style="width: 505px;height: 200px;margin: auto;resize: none"></textarea>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <div class="bottom-tools-box">
                    <button class="btn btn-info" id="save_but" onclick="addAndUpdateObject()" type="button"><span
                            aria-hidden="true" class="glyphicon glyphicon-floppy-disk"></span> 保存
                    </button>
                    <button class="btn btn-warning" onclick="top.tab_colseOnclick();" type="button"><span
                            aria-hidden="true" class="glyphicon glyphicon-remove-circle"></span> 取消
                    </button>
                </div>

            </div>
        </div>
    </form>
</div>
<input th:id="id" th:value="${id}" type="hidden"/>
<script src="/static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/vendor/webuploader/webuploader.js" type="text/javascript"></script>
<script src="/static/vendor/skin/js/ft-ui.js"></script>
<script src="/static/vendor/skin/js/jquery.c.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<script src="/static/vendor/sortable/sortable.js"></script>
<script src="/static/vendor/datetimepicker/jquery.datetimepicker.js"></script>
<script>
    function iniInfoForm() {
        let validator = $("#form1").validate({
            debug: true,
            rules: {
                // user_realname: {
                //     required: true
                // },
                // dq_yw_name: {
                //     required: true
                // }
            },
            messages: {
                // user_realname: {
                //     required: "执法人员不能为空！"
                // },
                // dq_yw_name: {
                //     required: "所属地区不能为空"
                // }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parents('td').find(".cError"));
            },
            submitHandler: function (form) {
            }
        });
    }

    let id = $("#id").val();
    $(function () {
        if (id !== null && id !== '') {
            $.get("/cp/getCompanyProductByArgs?id=" + id, function (result) {
                console.log(result)
                $("#code").val(result[0].code);
                $("#image").attr("src", result[0].imgUrl);
            })
            $("#image").css({
                'width': 100,
                'height': 200
            });
            $("#uploadFile").hide();
            $("#img_box").hover(function () {
                $("#img_btn").show()
            }, function () {
                $("#img_btn").hide()
            })
        }
    })
    let is_submit = false;
    let url = "";
    if (id !== null && id !== '') {
        url = '/cp/updateCompanyProduct';
    } else {
        url = '/cp/addCompanyProduct';
    }

    function addAndUpdateObject() {
        let formData = new FormData();
        let file_obj = document.getElementById('file').files[0];
        if (file_obj === undefined && id !== null && id !== '') {
            let bean = {
                id: id,
                code: $("#code").val(),
            }
            let submit = true;
            for (let beanKey in bean) {
                let beanElement = bean[beanKey];
                if ((beanElement === null || beanElement === "") && beanKey !== "id"&& beanKey !== "remark") {
                    submit = false;
                    $("#" + beanKey).siblings(".cError").append(`
            <span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>
            `);
                    return;
                }
            }
            if (submit) {
                if (top.ajax.synclBody(url, bean)) {
                    modelWindow.alert(top.CMSLang.Add_success);
                    top.getCurrentFrameObj().loadListble();
                    top.tab_colseOnclick();
                }else {
                    modelWindow.alert(top.CMSLang.Add_fail);
                }

            }
        } else {

            if (file_obj === undefined) {
                alert("请选择证书照片")
                return false;
            } else {
                formData.append("pics", file_obj);

                let imgUrl = '';
                $.ajax({
                    url: "/cs/uploadPic",
                    type: "post",
                    data: formData,
                    async: false,
                    cache: false,
                    dataType: 'json',
                    contentType: false,//不设置内容类型
                    processData: false, //不处理数据
                    success: function (result) {
                        console.log(result)
                        if (result !== null) {
                            imgUrl = result.photo
                            let bean = {
                                id: id,
                                code: $("#code").val(),
                                imgUrl: imgUrl
                            }
                            let submit = true;
                            for (let beanKey in bean) {
                                let beanElement = bean[beanKey];
                                if ((beanElement === null || beanElement === "") && beanKey !== "id" && beanKey !== "remark") {
                                    submit = false;
                                    $("#" + beanKey).siblings(".cError").empty().append(`<span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>`);
                                    return;
                                }
                            }
                            if (submit) {
                                if (top.ajax.synclBody(url, bean)) {
                                    modelWindow.alert(top.CMSLang.Add_success);
                                    top.getCurrentFrameObj().loadListble();
                                    top.tab_colseOnclick();
                                }else {
                                    modelWindow.alert(top.CMSLang.Add_fail);
                                }

                            }
                        } else {
                            alert("照片上传异常")
                        }
                    },
                    error: function () {
                        alert("提交失败")
                    },

                });
            }

        }

    }

    $("#file").on('change', function () {
        let file = this.files[0];
        if (window.FileReader) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function (e) {
                $("#image").attr("src", e.target.result).css({
                    'width': 100,
                    'height': 200
                });
            };
            $("#uploadFile").hide();
            $("#img_box").hover(function () {
                $("#img_btn").show()
            }, function () {
                $("#img_btn").hide()
            })
        }
    })
</script>
</body>

</html>
